<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态列表</title>
    <style>
        /* 通配符选择器 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 标签选择器 组合选择器 */
        #fruits > li {
            list-style: none;
            width: 280px;
            height: 40px;
            background-color: sandybrown;
            color: white;
            text-align: center;
            margin-top: 4px;
            font: 18px/40px Arial;

        }

        body {
            background-color: #F5DEB3;
        }

        #fruits {
            margin: 20px auto;
        }

        #fruits > li > a {
            text-decoration: none;
            color: white;
            float: right;
            margin-right: 10px;
        }

        #mian {

            width: 50%;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

        }

        input {
            margin-top: 5px;
            height: 35px;
            width: 230px;
            border-radius: 4px;
            text-align: center;
            font: 15px/35px Arial;
            outline: none;
            border: none;
        }

        #okB {
            width: 50px;
            height: 30px;
            background-color: red;
            vertical-align: middle;
            border-radius: 4px;
            outline: none;
            border: none;
        }
    </style>
</head>

<body>
<div id="mian">
    <ul id="fruits">
        {% for c in code %}
            <li>{{ c }}<a href="">╳</a></li>
        {% endfor %}
    </ul>
    <input type="text"/>
    <button type="submit" id="okB">确认</button>
</div>
</body>
<script>
    function removeItem(evt) {
        evt.preventDefault()
        let liitem = evt.target.parentNode
        liitem.parentNode.removeChild(liitem)
    }

    function addItem(evt) {
        let fruitName = addinput.value.trim()
        if (fruitName.length > 0) {
            let fruitItem = document.createElement('li')
            fruitItem.textContent = fruitName
            let delButton = document.createElement('a')
            delButton.textContent = 'x'
            delButton.href = ''
            delButton.addEventListener('click', removeItem)
            fruitItem.appendChild(delButton)
            ulitem.appendChild(fruitItem)

            addinput.value = ''
            addinput.focus()
        }
    }

    let delButton = document.querySelectorAll('#fruits>li>a')
    for (let i = 0; i < delButton.length; ++i) {
        delButton[i].addEventListener('click', removeItem)
    }
    let addinput = document.querySelector('#fruits+input')
    let addButton = document.querySelector('button')
    let ulitem = document.querySelector('#fruits')
    addinput.addEventListener('keydown', (evt) => {
        if (evt.keyCode == 13) {
            addItem()
        }
    })
    addButton.addEventListener('click', addItem)
</script>
</html>
